<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>誉禾植物店</title>
  <!-- bootstrap样式 -->
  <link href="https://cdn.staticfile.net/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet">
  <!-- 可以发送jquery请求 -->
  <script src="../js/jquery.min.js"></script>
  <!-- bootstrap框架 -->
  <script src="https://cdn.staticfile.net/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>
</head>
<!-- 网页尾部 -->
<style>
  footer {
    background: url('../img/bgplant.jpg') no-repeat;
    background-size: 100% 100%;
    padding: 5% 0;
  }

  input {
    outline: none;
  }

  .footer_input {
    height: 50px;
    padding-left: 5px;
    width: 80%;
    border: 0;
    font-size: 14px;
  }

  .footer_btn {
    border: 0;
    background-color: #8eb359;
    color: #fff;
    padding: 5px 25px;
    font-size: 14px;
  }
</style>
<style>
  @media (min-width: 1200px) {

    .container,
    .container-lg,
    .container-md,
    .container-sm,
    .container-xl {
      max-width: 1200px;
    }
  }
</style>

<body>
  <footer>
    <div class="container">
      <div class="row">
        <div class="col-md-4" style="padding-right: 6%;">
          <h3 style="font-weight: 600;font-size: 25px;line-height: 40px;">搜索您需要的观赏绿植产品或新闻咨询</h3>
        </div>
        <div class="col-md-8">
          <div style="display: flex;">
            <input class="footer_input" type="text" placeholder="请输入关键字">
            <button class="footer_btn">搜索</button>
          </div>
          <div style="display: flex;margin-top: 2%;">
            <span style="font-size: 12px;">热门关键字：青凤凰 兰黛莲 冬美人 珑月</span>
          </div>
        </div>
      </div>
    </div>
  </footer>
  <div style="text-align: center;padding: 1% 0;">
    <span style="font-size: 12px; color: rgb(153, 153, 153);">版权所有 © 誉禾植物店</span>
  </div>
</body>

</html>